<template>
  <div class="login-container">
    <div class="main-contenor">
      <div class="login-left">
        <div class="top-code">
          <div class="code-img"
               @click="changeLoginWay">
            <img v-if="loginWay === 1"
                 src="../../assets/images/icon_ewm@2x.png" />
            <img v-else
                 src="../../assets/images/icon_pm@2x.png" />
          </div>
        </div>
        <div class="login-content">
          <div class="login-title"
               v-text="forgetPassword?'忘记密码':'自助售卖系统'"></div>
          <div v-if="forgetPassword"
               class="login-account">
            <el-form>
              <div class="login-items">
                <div class="input-label">手机号</div>
                <div class="verify-phone">
                  <el-input class="login-input"
                            v-model="temp.mobile"
                            placeholder="请输入内容"></el-input>
                  <div class="verify-code"><span class="separate"></span><span class="send-code"
                          @click="sendCode">发送验证码</span></div>
                </div>
              </div>
              <div class="login-items">
                <div class="input-label">验证码</div>
                <el-input class="login-input"
                          v-model="temp.code"
                          placeholder="请输入内容"></el-input>
              </div>
              <div class="login-items">
                <div class="input-label">新密码</div>
                <el-input type="password"
                          class="login-input"
                          v-model="temp.new_password"
                          placeholder="请输入内容"></el-input>
              </div>
              <div class="login-items">
                <div class="input-label">确认密码</div>
                <el-input type="password"
                          class="login-input"
                          v-model="password"
                          placeholder="请输入内容"></el-input>
              </div>
            </el-form>
            <div class=""
                 style="display:flex;justify-content: space-between;">
              <div></div>
              <div class="confirm-change"
                   @click="confirmChange">确认</div>
            </div>
          </div>
          <div v-if="!forgetPassword && loginWay === 1"
               class="login-account">
            <el-form>
              <div class="login-items">
                <div class="input-label">账号</div>
                <el-input class="login-input"
                          v-model="loginName"
                          placeholder="请输入内容"></el-input>
              </div>
              <div class="login-items">
                <div class="input-label">密码</div>
                <el-input type="password"
                          class="login-input"
                          v-model="password"
                          placeholder="请输入内容"></el-input>
              </div>
              <!-- <div class="login-items">
                <div class="login-roles">
                  <div class="input-label">角色</div>
                  <el-select placeholder="请选择"
                             class="login-select"
                             v-model="loginType">
                    <el-option v-for="item in rolesOptions"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value"
                               :disabled="item.disabled"></el-option>
                  </el-select>
                </div>
              </div> -->
            </el-form>
            <div class="remenber">
              <div>
                <el-checkbox>记住我</el-checkbox>
              </div>
              <div class="login-img">
                <el-button type="primary"
                           @click.native.prevent="handleLogin()">
                  登录
                  <i class="el-icon-arrow-right el-icon--right"></i>
                </el-button>
                <!-- <img src="../../assets/images/btn_bg@2x.png" /> -->
              </div>
            </div>
            <div class="forget-password"
                 @click="forgetPassword = true">忘记密码</div>
          </div>
          <div v-else></div>
        </div>
      </div>
      <div class="login-right"></div>
    </div>
    <template v-if="dialogVisible">
      <div class="select-box">
        <div class="identity-choice">
          <div class="avatar-item"
               v-for="(items,index) in adminOptions"
               :key="index"
               @click="handleLogin(items.value)">
            <div class="avatar-img">
              <el-image :src="require('@/assets/images/avatar/'+ items.avatar)"
                        fit="contain"></el-image>
            </div>
            <div class="avatar-name"> {{ items.label }} </div>
          </div>
        </div>
      </div>
      <div class="login-mask"></div>
    </template>
  </div>
</template>

<script type="text/javascript">
export default {
  name: "Login",
  data() {
    return {
      dialogVisible: false,
      forgetPassword: false,
      rolesOptions: [
        {
          value: 1,
          label: "运营中心",
          avatar: 'pic_yyzx@2x.png'
        },
        {
          value: 2,
          label: "投资人",
          avatar: 'pic_tzr@2x.png'
        },
        {
          value: 3,
          label: "商家",
          avatar: 'pic_sj@2x.png'
        },
        {
          value: 4,
          label: "合伙人",
          avatar: 'pic_hhr@2x.png'
        },
        {
          value: 5,
          label: "供应商",
          avatar: 'pic_gys@2x.png'
        },
        {
          value: 6,
          label: "配送员",
          avatar: 'pic_psy@2x.png'
        }
      ],
      adminOptions: [],
      loginName: "",
      password: "",
      loginType: "",
      loginWay: 1,
      temp: {
        mobile: "",
        code: "",
        new_password: ""
      }
    };
  },
  methods: {
    changeLoginWay() {
      if (this.loginWay === 1) {
        this.loginWay = 2;
      } else {
        this.loginWay = 1;
      }
    },
    handleLogin(role) {
      role = role || ''
      const data = {
        username: this.loginName,
        password: this.password
      };
      if (role) {
        data["role"] = role;
      }
      const path = {
        app: "user",
        api: "api_user_index_login",
        version: "1.0",
        type: 1,
        data: data
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        this.socketData(res);
      });
    },
    resetTemp() {
      this.temp = {
        mobile: "",
        code: "",
        new_password: ""
      }
    },
    // 发送验证码
    sendCode() {
      const path = {
        app: "wx",
        api: "api_wx_user_sendCode",
        version: "1.0",
        type: "1",
        data: {
          mobile: this.temp.mobile ? this.temp.mobile : ''
        }
      }
      console.log('JSON.stringify(path)', JSON.stringify(path))
      this.socketApi.sendSock(JSON.stringify(path), res => {
        this.socketData(res);
      });
    },
    // 确认修改密码
    confirmChange() {
      const path = {
        app: "user",
        api: "api_user_index_forgetPassword",
        version: "1.0",
        type: 1,
        data: {
          mobile: this.temp.mobile ? this.temp.mobile : '',
          code: this.temp.code ? this.temp.code : '',
          new_password: this.temp.new_password ? this.temp.new_password : ''
        }
      }
      this.socketApi.sendSock(JSON.stringify(path), res => {
        this.socketData(res);
      });
    },
    socketData(res) {
      if (res !== '{"type":"ping"}') {
        const resj = JSON.parse(res);
        if (resj.code === 10000) {
          if (resj.api === "api_user_index_login") {
            this.$store.dispatch("loginAccount", true);
            this.$store.dispatch("LoginByUsername", resj.data).then(() => {
              this.$router.push({ path: "/index/index" });
            });
          } else {
            console.log("res", resj);
          }
        } else if (resj.code === 1) {
          if (resj.api === "api_user_index_login") {
            const data = []
            resj.data.forEach(element => {
              data.push(parseInt(element))
            });
            const adminOptions = [];
            console.log('33', data);
            this.rolesOptions.forEach(element => {
              if (data.indexOf(element.value) !== -1) {
                console.log('element', element);
                adminOptions.push(element)
              }
            })
            this.adminOptions = adminOptions;
            this.dialogVisible = true;
          } else if (resj.api === "api_user_index_forgetPassword") {
            console.log('resj.data', resj.data)
          } else if (resj.api === "api_wx_user_sendCode") {
            console.log('发送验证码', resj.data)
            this.$notify({
              title: "成功",
              message: "密码修改成功",
              type: "success",
              duration: 2000
            });
            this.forgetPassword = false;
            this.resetTemp()
          }
        } else {
          this.$message.error(resj.message);
        }
      }
    }
  }
};
</script>

<style scoped>
.login-container {
  width: 100%;
  height: 100%;
  overflow: auto;
  background-image: url("~@/assets/images/background.png");
  background-size: 100%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
}
.main-contenor {
  width: 1280px;
  height: 800px;
  margin: auto;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}
.login-left {
  width: 496px;
  height: 100%;
}
.top-code {
  width: 100%;
  height: 56px;
}
.code-img {
  width: 56px;
  height: 56px;
  height: auto;
  cursor: pointer;
}
.code-img img {
  width: 100%;
  height: auto;
}
.login-content {
  padding: 60px 81px 0 81px;
  height: 744px;
  box-sizing: border-box;
}
.login-title {
  color: #2d4198;
  font-size: 32px;
  padding-bottom: 87px;
}
.login-account {
  height: 561px;
}
.login-items {
  padding-bottom: 40px;
}
.input-label {
  color: #999999;
  font-size: 16px;
}
.login-right {
  width: 784px;
  height: 100%;
  background-image: url("~@/assets/images/login@2x.png");
  background-size: 100%;
  background-repeat: no-repeat;
}
.login-select {
  width: 100%;
}
.remenber {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
}
.login-img {
  width: 120px;
  height: 40px;
}
button {
  width: 100%;
  height: 100%;
  background-color: #2d4198;
  border: none;
  box-shadow: 0px 10px 20px 0px rgba(45, 65, 152, 0.2);
  border-radius: 20px;
  padding: 0;
}
.el-button:focus,
.el-button:hover {
  background-color: #1e3080;
}
.forget-password {
  padding-top: 127px;
  font-size: 14px;
  color: #cccccc;
  cursor: pointer;
}
.login-mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background: #000;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.identity-choice {
  width: 800px;
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-flow: wrap;
  background-color: #ffffff;
}
.avatar-item {
  padding: 35px 52px;
  box-sizing: border-box;
  cursor: pointer;
  opacity: 0.5;
}
.avatar-item:hover {
  opacity: 1;
}
.avatar-img {
  width: 96px;
  height: 96px;
}
.avatar-name {
  margin-top: 12px;
  text-align: center;
}
.select-box {
  z-index: 9999;
  margin: auto;
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.verify-phone {
  display: flex;
  align-items: center;
  justify-content: center;
}
.separate {
  width: 1px;
  height: 16px;
  background: rgba(45, 65, 152, 1);
  display: block;
}
.verify-code {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(45, 65, 152, 1);
  line-height: 1;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.send-code {
  margin-left: 15px;
  cursor: pointer;
}
.confirm-change {
  width: 120px;
  height: 40px;
  background: rgba(45, 65, 152, 1);
  box-shadow: 0px 10px 20px 0px rgba(45, 65, 152, 0.2);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 1;
}
</style>
